import React from 'react';
import Api from 'Utils/api';
import { connect } from 'react-redux';
import * as routerActions from 'react-router-redux';
import { BROWSER_MODE } from 'Constants/webConstants';
import { RESOURCE_HOST } from '../../../../constants/config';
import './index.scss';

class RunOnce extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      runDirectory: [],
      Parentdirectory: []
    };
    this.init = ::this.init;
  }
  componentWillMount() {
    this.init();
  }
  init() {
    const api = new Api({
      method: 'GET',
      path: '/directorys',
      success: (res) => {
        this.setState({
          Parentdirectory: res
        }, () => {
          if (res.length !== 0) {
            for (let i = 0, len = res.length; i < len; i++) {
              this.initProcess(res[i]);
            }
          }
        });
      },
      error: () => {
        clearInterval(this.refreshData);
      }
    });
    api.run();
  }
  initProcess(directory) {
    const api = new Api({
      method: 'GET',
      path: `/processes/user/${directory.id}`,
      success: (res) => {
        const newRunDirectory = this.mergeDirectory(directory, res);
        this.setState({
          runDirectory: newRunDirectory
        });
      },
      error: () => {
        clearInterval(this.refreshData);
      }
    });
    api.run();
  }
  mergeDirectory(directory, process) {
    const { Parentdirectory } = this.state;
    for (let i = 0, len = Parentdirectory.length; i < len; i++) {
      if (Parentdirectory[i].id === directory.id) {
        Parentdirectory[i].child = process;
      }
    }
    return [...Parentdirectory];
  }
  handleClick(id) {
    this.props.dispatch(routerActions.push(`/server/run_once/process_detail/${id}`));
  }
  render() {
    const { runDirectory } = this.state;
    const { mode } = this.props;
    const isVertical = BROWSER_MODE.isVertical(mode);
    return (
      <div className={`${isVertical ? 'v-' : ''}run-once-page`}>
        <div className="run-once-wrap">
          <div className="run-once-title">
            办事指南
          </div>
          <div className="content-wrap">
            {
              runDirectory.length > 0 && runDirectory.map((item) => {
                return (
                  <div className="content-item" key={item.id}>
                    <div className="item-title">
                      {item.name}
                    </div>
                    <div className="icon-wrap">
                      {
                        item.child && item.child.length > 0 && item.child.map(child => (
                          <div className="item-icon" key={child.id} onClick={this.handleClick.bind(this, child.id)}>
                            <img src={`${RESOURCE_HOST}${child.logo}`} alt={child.process_name} />
                            <div className="label">
                              {child.process_name}
                            </div>
                          </div>
                        ))
                      }
                    </div>
                  </div>);
              })
            }
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
    ...state.webReducer
  };
}
export default connect(mapStateToProps)(RunOnce);
